<template>
  <div>
    <div class="calendar">
      <span class="header" @click="signin">打卡</span>
      <div class="ym">
        <!--后一个月按钮-->
        <i class="prev" @click="prevMonth">{{ '<' }}</i>
        <!-- 今天的年/月，如图显示的2019年11月 -->
        <span class="currentData">{{ year }}年{{ month }}月</span>
        <!--前一个月按钮-->
        <i class="next" @click="nextMonth">{{ '>' }}</i>
      </div>
      <ul class="thead">
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
      </ul>
      <ul id="data">
        <li v-for="(value, key) in calList" :key="key" :class="{active:value==today}">
          <!--展示日期-->
          <span class="day">{{ value }}</span>
          <span class="pro" v-if="showProgrssStatus(value) === 0">{{ '签到' }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'Calendar',
  data() {
    return {
      year: '', // 当前年份
      month: '', // 当前月份
      today: 0, // 当前日期
      calList: [], // 日历数组
      progressData: [], // 日历中的特殊表识
    }
  },
  mounted() {
    this.getCalendar()
  },
  methods: {
    async getCalendar(cYear, cMonth) {
      let calendarArr = []
      let myDate = new Date()
      let year = cYear || this.year ? this.year : myDate.getFullYear()
      let month = cMonth || this.month ? this.month : myDate.getMonth() + 1
      let today = myDate.getDate()

      this.year = year
      this.month = month
      this.today = today

      let firstday = new Date(year, month - 1, 1).getDay() //当月第一天是周几
      let days = new Date(year, month, 0).getDate() //当月有多少天+1
      for (let i = 0; i < days; i++) {
        calendarArr[i] = i + 1
      }
      for (let j = 0; j < firstday; j++) {
        // 日 一 二 三 四 五 六         当月首日前位置补‘’
        calendarArr.unshift('')
      }
      // 获取日历的行数
      let len = calendarArr.length
      let line = Math.ceil(len / 7)

      for (let k = 0; k < line * 7 - len; k++) {
        // 日 一 二 三 四 五 六         当月最后一日后位置补‘’
        calendarArr.push('')
      }
      this.calList = calendarArr
      //   '' ''  ''  ''   ''  ''  1          当月首日前位置补‘’
      //   2   3   4   5   6   7   8
      //   9   10  11  12  13  14  15
      //   16  17  18  19  20  21  22
      //   23  24  25  26  27  28  29
      //   30  31  ''  ''  ''  ''  ''         当月最后一日后位置补‘’
      // 调用接口，获取需要显示的数据
      // eg：2019年11月7日休息，status为0的才会显示
      const { data: res } = await this.$http.get('hx/signin', {
        params: { year: cYear, month: cMonth },
      })
      if (res.meta.status !== 200) {
        return Toast(res.meta.msg)
      }

      this.progressData = res.data
    },
    // 上一个月按钮点击
    prevMonth() {
      this.progressData = []
      this.month--
      if (this.month < 1) {
        this.month = 12
        this.year--
      }
      this.getCalendar(this.year, this.month)
    },
    // 下一个月按钮点击
    nextMonth() {
      this.progressData = []
      this.month++
      if (this.month > 12) {
        this.month = 1
        this.year++
      }
      this.getCalendar(this.year, this.month)
    },
    // 计算日历中每日任务的状态
    showProgrssStatus(value) {
      for (let item in this.progressData) {
        if (this.progressData[item] === value) {
          return 0
        }
      }
    },
    // 打卡签到
    async signin() {
      const { data: res } = await this.$http.get('hx/setsignin')
      if (res.meta.status !== 200) {
        return Toast(res.meta.msg)
      }
      this.progressData.push(new Date().getDate())
      Toast(res.meta.msg)
    },
  },
}
</script>

<style lang="less" scoped>
.calendar {
  background: #fff;
  position: relative;
  width: 360px;
  height: auto;
  margin: 1.12px auto;
  border-radius: 1.12px;
  font-family: 'PingFangSC-Regular';
  overflow: hidden;
  .header {
    position: absolute;
    float: right;
    right: 11.12px;
    font-size: 0.5rem;
    color: #409eff;
    cursor: pointer;
  }
  .ym {
    padding: 22.4px 0 16.8px;
    font-size: 20.16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .prev {
      width: 11.2px;
      height: 16.8px;
      background-size: 100% 100%;
      margin-left: 17px;
      cursor: pointer;
    }
    .currentData {
      width: 112px;
      font-family: PingFangSC-Medium;
      font-size: 16.8px;
      color: #333;
    }
    .next {
      width: 11.2px;
      height: 16.8px;
      background-size: 100% 100%;
      margin-right: 9.52px;
      cursor: pointer;
    }
  }
  ul.thead {
    width: 100%;
    display: table;
    padding-bottom: 20.16px;
    li {
      width: 14.28%;
      height: 22.4px;
      text-align: center;
      font-size: 15.68px;
      float: left;
      font-family: PingFangSC-Regular;
      color: #888;
      span {
        font-size: 12.32px;
      }
    }
  }
  #data {
    margin-top: 0;
    li {
      width: 14.28%;
      height: 39.2px;
      text-align: center;
      float: left;
      span.day {
        font-size: 15.68px;
        height: 15.68px;
        font-family: PingFangSC-Regular;
        color: #a3a3a1;
        margin-bottom: 2.24px;
      }
      img {
        width: 17.92px;
        height: 17.92px;
        display: block;
        margin: 0 auto;
        background-size: cover;
      }
      span {
        font-size: 12.32px;
        display: block;
        color: #ccc;
      }
      .pro {
        font-size: 12.32px;
        color: #ccc;
        margin-top: 6.72px;
      }
    }
    li.active {
      color: #fd810b;
      span.pro {
        font-size: 12.32px;
        color: #fd810b;
        margin-top: 6.72px;
      }
    }
  }
}
</style>